<template>
  <div>
    <fixedheader title="[我的存茶] 委托拍卖"></fixedheader>
    <div class="order">
      <div class="order-wrap">
        <div class="order-container" ref="storeteas" v-if="item">
          <div class="order-list">
            <div class="order-item border-1px">
              <div class="item-content">
                <div class="item-img" @click.stop.prevent="showDetail(item)"><img :src="getThumbnail(item)" alt=""></div>
                <div class="item-info">
                  <h3 class="title" @click.stop.prevent="showDetail(item)">{{item.name}}</h3>
                  <div class="sellpoint">购入日期： {{item.createAt | formatDate}}</div>
                  <div class="sellpoint">购入价/现价： {{item.initPrice | currency}} / {{item.currentPrice | currency}}</div>
                  <div class="sellpoint">初始购入数： {{item.initCount || 0}}</div>
                  <div class="sellpoint">剩余存茶数： <strong>{{item.leftCount || 0}}</strong></div>
                  <div class="sellpoint">剩余存茶增值： <strong>{{(item.leftCount) * (item.currentPrice - item.initPrice) || 0 | currency}}</strong></div>
                  <div class="sellpoint">正委托拍卖： 笔数 {{item.auctions && item.auctions.length || 0}}, 商品数 {{getItemCount(item.auctions)}}</div>
                  <div class="sellpoint">剩余可委托数： {{item.leftCount || 0}}</div>
                  <div class="more-ops">
                    <span class="btn" @click="addNew(item)">新增委托</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="history_title">委托拍卖历史: ({{item.auctions && item.auctions.length || 0}}笔)</div>
          <div class="order-list" v-if="item.auctions && item.auctions.length">
            <div class="order-item border-1px" v-for="(tea, index) in item.auctions" :key="index">
              <div class="item-content">
                <div class="item-info">
                  <div class="sellpoint">委托日期： {{tea.createAt | formatDate}}</div>
                  <div class="sellpoint">委托数量： <strong>{{tea.count}}</strong></div>
                  <div class="sellpoint">起拍价&nbsp;&nbsp;&nbsp;&nbsp;： <strong>{{tea.startPrice | currency}}</strong></div>
                  <div class="sellpoint">加价幅度： {{tea.markup | currency}}</div>
                  <div class="sellpoint">拍卖周期： {{tea.dueDay || 0}}天</div>
                  <div class="sellpoint">拍卖状态： <strong>{{stateDesc(tea.aucStatus)}}</strong></div>
                  <div class="more-ops floatright">
                    <span class="btn" @click="showAuctionDetail(tea)">竞拍详情</span>
                    <span class="btn disabled">终止委托</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
        <div class="no-order" v-else>———&nbsp;&nbsp;啊哦，还没有相关记录哦&nbsp;&nbsp;———</div>
        <gotop ref="top" @top="goTop" :scrollY="scrollY"></gotop>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import fixedheader from '@/components/fixedtoolbar/fixedheader';
  import gotop from '@/components/fixedtoolbar/gotop';
  import {formatDate} from '@/common/js/date';
  import api from '@/api/api';

  export default {
    data() {
      return {
        item: null,
        pageNumber: 1,
        pageSize: 1,
        loadEnd: false,
        scroller: null,
        loading: false,
        lastExec: +new Date(),
        scrollY: 0,
        states: {
          0: '预展',
          1: '拍卖中',
          2: '拍卖暂停',
          3: '拍卖结束',
          4: '流拍'
        }
      };
    },
    activated() {
      this.loadEnd = false;
      this.fetchData(true);
      this.show();
    },
    deactivated() {
      this._reset();
      this.hide();
    },
    mounted() {
      this.scroller = this.$refs.storeteas;
      window.onscroll = () => {
        this.scrollY = window.pageYOffset;
      };
    },
    methods: {
      fetchData(force) {
        this.loading = true;
        let id = this.$route.query.id;
        api.getSingleStore(id).then(response => {
          this.item = response.data;
          this.loading = false;
        }).catch(response => {
          this.loading = false;
        });
      },
      getItemCount(auctions) {
        if (!auctions || !auctions.length) {
          return 0;
        }
        var total = 0;
        auctions.map(o => {
         total += o.count || 0;
        });
        return total;
      },
      _reset() {
      },
      getThumbnail(item) {
        let icon = item.icon;
        if (icon) {
          if (icon.indexOf(api.CONFIG.psCtx) !== -1) {
            return icon;
          }
          return api.CONFIG.psCtx + icon + '?w=750&h=500&v=v2';
        } else {
          return api.CONFIG.defaultImg;
        }
      },
      stateDesc(state) {
        return this.states[state];
      },
      addNew(item) {
        this.$router.push({name: 'createTea', query: {id: item.id}});
      },
      showDetail(item) {
        if (item.productId) {
          this.$router.push({name: 'good', params: {id: item.productId}});
        }
      },
      showAuctionDetail(item) {
        this.$router.push({name: 'auctiondetail', params: {id: item.aucId}});
      },
      show() {
        this.$store.commit('HIDE_FOOTER');
      },
      hide() {
        this.$store.commit('SHOW_FOOTER');
      },
      back() {
        this.$router.back();
      },
      loadMore() {
        this.fetchData();
      },
      goTop() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    },
    components: {
      fixedheader, gotop
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      }
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin';
  .header
    position: fixed
    top: 0
    width: 100%
    height: 44px
    overflow: hidden
    z-index: 2
  .order
    position: absolute
    top: 44px
    bottom: 0
    width: 100%
    .order-wrap
      position: relative
      width: 100%
      .no-more
        width: 100%
        padding: 10px 0
        color: #ccc
        text-align: center
        font-size: 12px
        margin-bottom: 10px
      .order-container
        position: relative
        width: 100%
        display: flex
        flex-wrap: wrap
        overflow: auto
        box-sizing: border-box
        -webkit-overflow-scrolling: touch
        background-color: #fff
        .order-list
          position: relative
          width: 100%
          .order-item
            padding: 0 8px
            border-1px(rgba(7, 17, 27, 0.1))
            .item-content
              position: relative
              display: flex
              padding: 8px 0
              font-size: 12px
              .item-img
                position: relative
                display: inline-block
                width: 35%
                float: left
                padding-top: 5px
                img
                  width: 95%
                  margin-right: 10px
                  overflow: hidden
              .item-info
                position: relative
                flex: 1
                box-sizing: border-box
                overflow: hidden
                >.title
                  position: relative
                  color: #000
                  padding-top: 5px
                  font-size: 14px
                  line-height: 1.2
                  overflow: hidden
                  text-overflow: ellipsis
                  display: block
                  -webkit-line-clamp: 1
                  -webkit-box-orient: vertical
                  white-space: nowrap
                .sellpoint
                  display: block
                  font-size: 14px
                  color: #7f7f7f
                  margin-top: 4px
                  height: 17px
                  line-height: 17px
                  overflow: hidden
                  text-overflow: ellipsis
                  display: -webkit-box
                  -webkit-line-clamp: 1
                  -webkit-box-orient: vertical
                  strong
                    color: #10a117
                    font-weight: 400
                .price-wrap
                  position: relative
                  display: block
                  float: left
                  width: auto
                  line-height: 1.3
                  span
                    display: inline-block
                    padding-top: 3px
                    font-size: 12px
                  del
                    display: inline-block
                    color: #999
                    font-size: 12px
                .more-ops
                  position: relative
                  display: block
                  flex: 1
                  margin-top: 3px
                  .btn
                    display: inline-block
                    padding: 0 6px
                    height: 24px
                    line-height: 24px
                    text-align: center
                    font-size: 12px
                    background: #e4393c
                    color: #fff
                    border-radius: 2px
                    min-width: 50px
                    box-sizing: border-box
                    &.disabled
                      background: #999
                    &.orange
                      background: rgba(250,180,90,0.93)
                      color: #fff
                    &.green
                      background: #44b549
                      color: #fff
                    &.darkred
                      background: #d05148
                      color: #fff
                    &.blue
                      background: #00a0dc
                      color: #fff
                    &.white
                      color: #000
                      background: #fff
                      border: 1px solid rgba(7,17,27,0.1)
                .floatright
                  position: absolute
                  float: right
                  top: 10px
                  right: 20px
                  display: inline-block
                  .btn
                    display: block
                    margin-bottom: 10px
                    font-size: 12px
        .history_title
          display: block
          border-bottom: 1px solid rgba(7,17,27,0.1)
          width: 100%
          padding: 10px
          margin-top: 3px
          font-size: 14px
          font-weight: 700
          box-sizing: border-box
      .no-order
        position: relative
        width: 100%
        padding: 40px 0
        text-align: center
        font-size: 14px
        color: #ccc
</style>
